<template>
  <div class="person">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup lang="ts" name="Person">
    import { reactive,toRefs,toRef } from 'vue';

    //数据
    let person = reactive({
        name: '张三',
        age: 18,
    });
    // //拆分出的数据不是响应式数据
    // let {name, age} = person;
    //加上toRefs()后，name和age就变成ref定义的响应式数据
    //toRefs接收一个reactive定义的person对象，返回一个新的对象，
    // 新得对象中的属性都是ref定义的响应式数据，这些数据的值来自于person。改变新对象中的属性值，也会改变person中的属性值
    let {name, age} = toRefs(person);
    let nl = toRef(person, 'age');
    //方法
    function changeName() {
        person.name += '~';
        console.log(person);
    }
    function changeAge() {
        person.age += 1;
        console.log(person);
    }

</script>
<style scoped>
.person {
    /* 背景颜色 */
    background-color: skyblue;
    /* 阴影 */
    box-shadow: 0 0px 10px;
    /* 圆角 */
    border-radius: 4px;
    padding: 20px; /* 内边距 */
}
button { 
    margin: 0 5px;
}
</style>


